<div ng-class="vm.field.isMultiselect ? 'textarea-wrapper' : ''"
    class="inline-label">

  <select
    ng-if="!vm.field.isMultiselect"
    ng-model="vm.field.value"
    class="focus-input wp-inline-edit--field inplace-edit--field -animated form--select"
    wp-edit-field-requirements="vm.field.schema"
    ng-options="value as (value.name || value.value) for value in vm.field.options track by value.href"
    ng-required="vm.field.required"
    ng-focus="vm.handleUserFocus()"
    ng-disabled="vm.workPackage.inFlight"
    focus="vm.shouldFocus()"
    focus-priority="vm.shouldFocus()"
    ng-attr-id="{{vm.htmlId}}"
    ng-change="vm.handleUserSubmit()"
  >
    <option
      value=""
      ng-bind="vm.field.text.requiredPlaceholder"
      ng-if="vm.field.currentValueInvalid || vm.field.options.length == 0"
      ng-selected="vm.field.currentValueInvalid || vm.field.options.length == 0"
      disabled
    >
    </option>
  </select>

  <select
    ng-if="vm.field.isMultiselect"
    ng-model="vm.field.value"
    class="focus-input wp-inline-edit--field inplace-edit--textarea -animated form--select"
    wp-edit-field-requirements="vm.field.schema"
    ng-options="value as (value.name || value.value) for value in vm.field.options track by value.href"
    ng-required="vm.field.required"
    ng-focus="vm.handleUserFocus()"
    ng-disabled="vm.workPackage.inFlight"
    focus="vm.shouldFocus()"
    focus-priority="vm.shouldFocus()"
    ng-attr-id="{{vm.htmlId}}"
    multiple=""
    size=5
  >
    <option
      value=""
      ng-bind="vm.field.text.requiredPlaceholder"
      ng-if="vm.field.currentValueInvalid || vm.field.options.length == 0"
      ng-selected="vm.field.currentValueInvalid || vm.field.options.length == 0"
      disabled
    >
    </option>
  </select>

  <a href class="form-label no-decoration-on-hover -transparent" ng-click="vm.field.toggleMultiselect()">
    <icon-wrapper icon-name="minus2"
                  icon-title="{{I18n.t('js.work_packages.label_switch_to_single_select')}}"
                  ng-if="vm.field.isMultiselect"
                  css-class="icon4">
    </icon-wrapper>

    <icon-wrapper icon-name="add"
                  icon-title="{{I18n.t('js.work_packages.label_switch_to_multi_select')}}"
                  ng-if="!vm.field.isMultiselect"
                  css-class="icon4">
    </icon-wrapper>
  </a>

  <wp-edit-field-controls ng-show="!vm.inEditMode"
                          ng-if="vm.field.isMultiselect"
                          field-controller="vm"
                          on-save="vm.handleUserSubmit()"
                          on-cancel="vm.handleUserCancel()"
                          save-title="{{ vm.field.text.save }}"
                          cancel-title="{{ vm.field.text.cancel }}">
  </wp-edit-field-controls>
</div>
